@import 'bpmn-js/dist/assets/diagram-js.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
@import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
@import 'diagram-js-minimap/assets/diagram-js-minimap.css';

@import '//at.alicdn.com/t/font_2476109_k49r4ezcwke.css';

.page-bpmn {
  width: 100vw;
  height: 100vh;

  .page-head {
    display: inline-block;
    position: fixed;
    top: 0;
    right: 0;

    .head-item {
      padding: 8Px 12Px;

      &.active {
        color: red;
      }

      &:hover {
        color: yellow;
      }
    }
  }

  .page-bpmn-model,
  .page-bpmn-view {
    height: 100%;
    width: 100%;
  }

  .page-bpmn-model {
    background-color: #f8f8f8;
    background-image: linear-gradient(90deg, rgba(220, 220, 220, 0.4) 6%, transparent 0), linear-gradient(rgba(192, 192, 192, 0.4) 6%, transparent 0);
    background-size: 12px 12px;

    svg.new-parent {
      background-color: transparent !important;
    }

    .bjs-powered-by {
      // display: none;
    }
  }

  .page-left,
  .page-right {
    vertical-align: top;
  }

  .page-left {
    display: inline-block;
    height: 100vh;
    width: 100vw;
  }

  .page-right {
    position: fixed;
    right: 0;
    top: 0;
    display: inline-block;
    width: 250Px;
    background-color: #fff;
    overflow: auto;
    max-height: 100vh;
  }

  .djs-minimap {
    top: auto;
    bottom: 40px;
  }

  .diagram-note {
    background-color: rgba(66, 180, 21, 0.7);
    color: White;
    border-radius: 5Px;
    font-family: Arial;
    font-size: 12Px;
    padding: 5Px;
    min-height: 16Px;
    width: 50Px;
    text-align: center;
  }

  .page-foot {
    position: fixed;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 250Px;
    padding: 8px 16px;
  }


  .properties-panel-parent {
    border-left: 1px solid #ccc;
    overflow: auto;

    &:empty {
      display: none;
    }

    >.djs-properties-panel {
      padding-bottom: 70px;
      min-height: 100%;
    }
  }

  .toggle-mode {
    display:none;
  }
}